<template>
	<view class="box">
		<navNav :navobj="navobj"></navNav>
		<view class="listBox" v-if="carlist.length>0">
			<view class="manager">
				<view class="total">共{{carlist.length}}宝贝</view>
				<view class="text" @click="deleteJudge = !deleteJudge">管理</view>
			</view>
			<view class="item" v-for="(itemC,indexC) in carlist" :key="itemC.id">
				<view class="title">{{itemC.name}}</view>
				<view class="cart" v-for="(item,index) in itemC.cart" :key="item.id">
					<view class="formation">
						<view class="dot" @click="unSelect(item.id,item.isSelected.key)">
							<view v-if="item.isSelected.key == 1" class="act">
								<uni-icons type="checkmarkempty" size="12" color="white"></uni-icons>
							</view>
						</view>
						<image @click="godetail(item.itemAttrValue[0].item.id)" :src="item.item.image" class="img" mode="aspectFill"></image>
						<view class="form">
							<view @click="godetail(item.itemAttrValue[0].item.id)">
								<view class="name">{{item.item.storeName}}</view>
								<view class="sku">规格: <span v-for="(attr,attrindex) in item.itemAttrValue" :key="attrindex">{{attr.attrValue}}</span></view>
							</view>
							<view class="priceBox">
								<view @click="godetail(item.itemAttrValue[0].item.id)" class="price"><span class="icon">￥</span>{{item.addingTimePrice}}</view>
								<view v-if="deleteJudge" @click="deleteCar(item.id)" class="delete">删除</view>
								<view v-else class="numBox">
									<view class="icon" @click="deleteCar(item.id)">-</view>
									<view class="num">{{item.num}}</view>
									<view class="icon" @click="addShop(item.id)" >+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="buttonBox">
			<view class="total">总计<span class="price">￥{{total}}</span></view>
			<view class="button" @click="toBuy">下单</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad,onShow} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {userStore} from '@/store/user.js'//引入空间
	const userStorer = userStore()//给空间命名
	const { carlist} = storeToRefs(userStorer);//解构数据
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
		  title:'购物车',
			image:true
	})
	const deleteJudge = ref(false)
	const total = ref(0)
	onLoad(()=>{
		allmoney()
	})
	const	godetail=(e)=>{
		uni.navigateTo({
			url: `/pages/home/shopDetail?id=`+e
		})
	}
	//加入购物车（商品数量加加使用）
	const addShop=async(e)=> {
		var data = {id:e}
		const result = await proxy.$api.gwcaradd(data)
		userStorer.carfun()
		navStore.getShopCar()
		allmoney()
	}
			
	// 计算价格
	const allmoney=()=>{
		total.value = 0
		var a =0
		var arr =[]
		for(var i=0;i<carlist.value.length; i++){
			for(var j=0;j<carlist.value[i].cart.length; j++){
				if(carlist.value[i].cart[j].isSelected.key == 1){
					arr.push(carlist.value[i].cart[j])
					a += carlist.value[i].cart[j].addingTimePrice*carlist.value[i].cart[j].num
					total.value = a.toFixed(2)
					}
			}
		}
	}
	const toBuy=()=> {
		uni.navigateTo({
			url: '/pages/order/buy?car='+ true +'&money='+ total.value
		})
	}
	//删除
	const deleteCar=async(id)=>{
		var data = {id: id}
		const result = await proxy.$api.ShopCarDelete(data)
		if(result.code==200){
			userStorer.carfun()
			navStore.getShopCar()
			allmoney()
		}
		
	}
	//选中
	const unSelect=async(id, type)=> {
		var data = {
			id: id,
			isSelected: type ^= 1
		}
		const result = await proxy.$api.ShopCarSelected(data)
		if(result.code==200){
			userStorer.carfun()
			allmoney()
		}
	}
		

</script>

<style lang="scss" scoped>
	.buttonBox {
		position: absolute;
		bottom: 0px;
		width: calc(100vw - 40px);
		background-color: white;
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.total {
			font-size: 14px;

			.price {
				font-size: 18px;
				color: $red;
			}
		}

		.button {
			background: $linerBlue;
			color: white;
			text-align: center;
			padding: 10px 70px;
			border-radius: 50px;
			font-weight: bold;
		}
	}



	.box {
		min-height: 100vh;
		background-color: $MainBackColor;
	}

	.listBox {
		.manager {
			display: flex;
			justify-content: space-between;
			margin: 10px;
			font-size: 14px;

			.total {
				color: $grey;
			}

			.text {
				font-weight: bold;
				color: $blue;
			}
		}

		.item {
			background-color: white;
			margin: 10px;
			padding: 10px;
			border-radius: 5px;

			.cart {}

			.title {
				font-size: 14px;
			}

			.numBox {
				display: flex;
				align-items: center;
				margin-right: 10px;

				.icon {
					font-size: 14px;
					background-color: $backGrey;
					width: 22px;
					height: 22px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.num {
					font-size: 14px;
					background-color: $backGrey;
					width: 30px;
					height: 22px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0px 2px;
				}
			}


			.formation {
				display: flex;

				.dot {
					width: 17px;
					height: 17px;
					border-radius: 50%;
					border: 1px solid $backGrey;
					margin: 0px 10px;
					margin-top: 30px;
					background-color: $backGrey;
				}

				.act {
					background-color: $blue;
					width: 100%;
					height: 100%;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

				}

				.img {
					width: 60px;
					height: 60px;
					margin: 10px 0px;
					margin-right: 10px;
					border-radius: 5px;
				}

				.form {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin: 10px 0px;
					width: calc(100% - 110px);

					.name {
						font-size: 14px;
					}

					.sku {
						font-size: 12px;
						color: $grey;
						margin-bottom: 20px;
					}

					.priceBox {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						.price {
							font-size: 14px;
							font-weight: bold;

							.icon {
								font-size: 12px;
							}
						}

					}

				}

			}



			.delete {
				background-color: $red;
				border-radius: 20px;
				text-align: center;
				padding: 5px 15px;
				color: white;
				font-size: 12px;
			}

		}

	}
</style>